﻿
@{
    ViewBag.Title = "修改用户";
    Layout = "~/Areas/Admin/Views/Shared/_Admin.cshtml";
}

<div id="app">
    <div class="am-cf am-padding">
        <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">后台管理</strong> / <small>@ViewBag.Title</small></div>
    </div>

    <div class="am-tabs am-margin" data-am-tabs>
        <ul class="am-tabs-nav am-nav am-nav-tabs">
            <li class="am-active"><a href="#tab1">基本信息</a></li>
        </ul>

        <div class="am-tabs-bd">
            <form action="" method="post" class="am-form" id="doc-vld-msg">
                <fieldset>

                    <div class="am-form-group">
                        <label for="txtUserName">账号</label>
                        <input type="text" id="txtUserName" placeholder="输入账号(必填)" required v-model="account" readonly />
                    </div>

                    <div class="am-form-group">
                        <label for="txtTypedPwd">密码</label>
                        <input type="password" id="txtTypedPwd" placeholder="输入密码(必填)" required v-model="typedPwd" />
                    </div>

                    <div class="am-form-group">
                        <label for="txtReTypedPwd">确认密码</label>
                        <input type="password" id="txtReTypedPwd" placeholder="请与密码输入一致(必填)" v-model="retypedPwd" required data-equal-to="#txtTypedPwd" />
                    </div>

                    <input type="hidden" name="data" v-bind:value="data" />

                    @if (!ViewBag.Success)
                    {
                        <div class="am-alert am-alert-danger">
                            @ViewBag.ErrMsg
                        </div>
                    }

                    <a href="~/admin/user" class="am-btn am-btn-danger">取消</a>
                    <button class="am-btn am-btn-secondary" type="submit">修改</button>
                </fieldset>
            </form>
        </div>
    </div>
</div>

@section Scripts{
    <script>
        $('.admin-sidebar-user').addClass('current');

            var model = new Vue({
                el: '#app',
                data: {
                    id: @ViewBag.Id,
                    account: '@ViewBag.Account',
                    typedPwd: '@ViewBag.TypedPwd',
                    retypedPwd: '@ViewBag.RetypedPwd',
                },
                computed: {
                    data: function () {
                        return JSON.stringify(this._data);
                    }
                }
            })

            $('#doc-vld-msg').validator({
                onValid: function (validity) {
                    $(validity.field).closest('.am-form-group').find('.am-alert').hide();
                },

                onInValid: function (validity) {
                    var $field = $(validity.field);
                    var $group = $field.closest('.am-form-group');
                    var $alert = $group.find('.am-alert');
                    // 使用自定义的提示信息 或 插件内置的提示信息
                    var msg = $field.data('validationMessage') || this.getValidationMessage(validity);

                    if (!$alert.length) {
                        $alert = $('<div class="am-alert am-alert-danger"></div>').hide().
                          appendTo($group);
                    }

                    $alert.html(msg).show();
                }
            });
            $('.admin-sidebar-user').addClass('current');
    </script>
}
